<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <!-- 下拉 -->
      <div class="ebook-bookmark-down-wrapper">
        <span class="icon-down" ref="iconDown"></span>
      </div>
      <div class="ebook-bookmark-text">{{ text }}</div>
    </div>
    <div class="ebook-bookmark-icon-wrapper" :style="isFixed ? fixedStyle : {}">
      <!-- 书签组件 -->
      <book-mark :color="color" :width="15" :height="35"></book-mark>
    </div>
  </div>
</template>
<script>
import { saveBookmark, getBookmark } from '../../utils/localStorage.js'
import { ebookMixin } from '../../utils/mixin.js'
import { realPx } from '../../utils/utils.js'
import BookMark from '../common/BookMark.vue'
const BLUE = '#346cbc'
const WHITE = '#fff'
export default {
  mixins: [ebookMixin],
  data() {
    return {
      text: this.$t('book.pulldownAddMark'),
      color: WHITE,
      isFixed: false // 控制书签条是否固定
    }
  },
  components: {
    BookMark
  },
  computed: {
    height() {
      return realPx(35)
    },
    threshold() {
      return realPx(50)
    },
    fixedStyle() {
      return {
        position: 'fixed',
        top: 0
        // right: `${(window.innerWidth - this.$refs.bookmark.clientWidth) / 2}px`
      }
    }
  },
  watch: {
    offsetY(v) {
      // console.log(v)
      //   状态二 ：未到达零界状态
      if (v >= this.height && v <= this.threshold) {
        this.beforeThreshold(v)
        //   状态三 : 超越零界状态
      } else if (v >= this.threshold) {
        this.afterThreshold(v)
        // 状态一 ： 未超过高度
      } else if (v > 0 && v < this.height) {
        this.beforeHeight()
        // 归为操作
      } else if (v === 0) {
        this.restore()
      }
    },
    // 监听vuex isBookmark变化 进而固定书签
    isBookmark(isBookmark) {
      this.isFixed = isBookmark
      if (isBookmark) {
        this.color = BLUE
      } else {
        this.color = WHITE
      }
    }
  },
  methods: {
    // 添加书签功能
    addBookmark() {
      console.log(this.showTotal())
      console.log(this.getBookmark)
      this.bookmark = getBookmark(this.fileName)
      if (!this.bookmark) {
        this.bookmark = []
      }
      // 获取文本
      const currentLocation = this.currentBook.rendition.currentLocation()
      // 将 start cfi 和 end cfi 进行拼接
      const cfibase = currentLocation.start.cfi.replace(/!.*/, '')
      const cfistart = currentLocation.start.cfi
        .replace(/.*!/, '')
        .replace(/\)$/, '')
      const cfiend = currentLocation.end.cfi
        .replace(/.*!/, '')
        .replace(/\)$/, '')
      const cfirange = `${cfibase}!,${cfistart},${cfiend})`
      console.log(cfirange)
      this.currentBook.getRange(cfirange).then((range) => {
        /*
        通过 toString 方法就可以拿到文本内容
        console.log(range.toString()) EditorsFranz W.GatzweilerCenter forDevelopment......
        */
        // 去掉空格
        const text = range.toString().replace(/\s\s/g, '')
        // console.log(text)
        this.bookmark.push({
          cfi: currentLocation.start.cfi, // 通过该判断当前页是不是书签
          text: text // 文本缩写
        })
        saveBookmark(this.fileName, this.bookmark)
        this.setTotal(this.bookmark.length)
        this.$forceUpdate()
        // console.log(this.total)
      })
    },
    // 删除书签功能
    removeBookmark() {
      console.log(this.showTotal())
      const currentLocation = this.currentBook.rendition.currentLocation()
      const cfi = currentLocation.start.cfi
      this.bookmark = getBookmark(this.fileName)
      console.log(cfi)
      saveBookmark(this.fileName, this.bookmark.filter(item => item.cfi !== cfi))
    },
    // 状态4：归位
    restore() {
      setTimeout(() => {
        this.$refs.bookmark.style.top = `${-this.height}px`
        this.$refs.iconDown.style.transform = 'rotate(0deg)'
      })
      // 当书签条固定 说明已经添加书签
      if (this.isFixed) {
        this.setIsBookmark(true)
        // 此时添加图书
        this.addBookmark()
      } else {
        this.setIsBookmark(false)
        this.removeBookmark()
      }
    },
    // 状态1：未超过书签的高度
    beforeHeight() {
      // 是否为书签页
      if (this.isBookmark) {
        this.text = this.$t('book.pulldownDeleteMark')
        this.color = BLUE
      } else {
        this.text = this.$t('book.pulldownAddMark')
        this.color = WHITE
      }
      this.isFixed = false
    },
    // 状态2：未到达零界状态
    beforeThreshold(v) {
      this.$refs.bookmark.style.top = `${-v}px`
      this.beforeHeight()
      if (this.$refs.iconDown.style.transform === 'rotate(180deg)') {
        this.$refs.iconDown.style.transform = 'rotate(0deg)'
      }
      this.isFixed = false
    },
    // 状态3：超越零界状态
    afterThreshold(v) {
      this.$refs.bookmark.style.top = `${-v}px`
      if (this.isBookmark) {
        this.text = this.$t('book.releaseDeleteMark')
        this.color = WHITE
        this.isFixed = false
      } else {
        this.text = this.$t('book.releaseAddMark')
        this.color = BLUE
        this.isFixed = true
      }
      const iconDown = this.$refs.iconDown
      if (
        iconDown.style.transform === '' ||
        iconDown.style.transform === 'rotate(0deg)'
      ) {
        iconDown.style.transform = 'rotate(180deg)'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ebook-bookmark {
  @import '../../assets/style/global.scss';
  position: absolute;
  left: 0;
  top: px2rem(-35);
  width: 100%;
  height: px2rem(35);
  z-index: 200;
  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: px2rem(45);
    bottom: 0;
    display: flex;
    .ebook-bookmark-down-wrapper {
      font-size: px2rem(15);
      color: white;
      @include center;
      transition: all 0.2s linear !important;
    }
    .ebook-bookmark-text {
      font-size: px2rem(15);
      color: white;
    }
  }
  .ebook-bookmark-icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: px2rem(15);
  }
}
</style>
